<script setup lang="ts">
	import { ref } from 'vue';
	defineProps({
		tabs: {
			type: Array<string>,
			required: true
		}
	})
	const emits = defineEmits(['change'])
	const tabIndex = ref(0)
	const handleChangeTabIndex = (index : number) => {
		tabIndex.value = index
		emits('change', index)
	}
	import { mainHomeExploreTabsHeight } from "../../utils/system"
	
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n()
</script>
<template>
	<view class="header-container" :style="`height: ${mainHomeExploreTabsHeight}rpx`">
		<view scroll-x :style="`height: ${mainHomeExploreTabsHeight}rpx`" class="tabs-scroll">
			<view v-for="(item,index) in tabs" :key="index" class="tab flex-center" :style="`height: ${mainHomeExploreTabsHeight}rpx; line-height: ${mainHomeExploreTabsHeight}rpx;`"
				@click="handleChangeTabIndex(index)">
				<text :class="{'text-selected': tabIndex === index}">{{t(`home.explorePage.${item}`)}}</text>
			</view>
		</view>
		<view class="right flex-center">
			<slot name="right"></slot>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.header-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: white;
		padding: 0 10rpx;

		.tabs-scroll {
			flex: 1;
			white-space: nowrap;
			overflow: scroll;

			.tab {
				display: inline-block;
				width: fit-content;
				margin: 0 15rpx;
				font-size: $font-size-28;
				color: $secondary-text-color;

				.text-selected {
					color: black;
				}
			}
		}
		.right {
			padding: 10rpx 20rpx;
		}
	}
</style>